<!-- 数字输入框 -->
<template>
  <el-input-number
    v-model="value"
    style="width: 100%"
    controls-position="right"
    @change="handleChange"
  />
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
const props = defineProps({
  config: { type: Object, required: true },
  form: { type: Object, required: true }
});
const value = computed({
  get: () =>
    props.form[props.config.prop] || props.form[props.config.prop] == "0"
      ? Number(props.form[props.config.prop])
      : undefined,
  set: (val) => (props.form[props.config.prop] = val + "")
});
const handleChange = (value: number) => {
  console.log(value);
};
</script>

<style lang="less" scoped>
:deep(.el-input-number) {
  width: 100% !important;
}
:deep(.el-input__inner) {
  text-align: left;
}
</style>
